<template>
  <div class="container">
    <base-title base-title="类型列表" />
    <baseTable :total="typeTotal" :structure="typeSc" :data="typeData" btn-items="export" @current-page-change="handleCurrentPageChange">
      <template #operation="{ scope }">
        <el-button style="padding: 5px" type="success" :icon="Edit" text @click="editType(scope.row.id)">编辑</el-button>
        <el-button style="padding: 5px" type="danger" :icon="Delete" text @click="onDelete(scope.row.id)">删除</el-button>
      </template>
    </baseTable>

    <BaseDialog v-model:visible="visible" @confirm="onSubmitUpdate">
      <el-form :model="editTypeForm" :rules="rules" ref="typeRef">
        <el-form-item label="标签名称" prop="type_name">
          <el-input v-model="editTypeForm.type_name" autocomplete="off" />
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script lang="ts" name="article_type" setup>
  import { ref, reactive, onBeforeMount } from 'vue'
  import { Edit, Delete } from '@element-plus/icons-vue'
  import { ElMessageBox, FormInstance, FormRules } from 'element-plus'
  import { typeSc } from '@/components/base-table/config'
  import { queryTypesRequest, deleteTypeRequest, updateTypeNameRequest } from '@/network/api/type-api'
  import formatUtcTime from '@/utils/formatTime'
  import BaseDialog from '@/components/base-dialog/Index.vue'
  import baseTable from '@/components/base-table/baseTable.vue'
  import notification from '@/utils/notification'
  const editTypeForm = reactive({
    type_id: 0,
    type_name: '',
  })
  const typeData = ref([])
  const typeTotal = ref<number>(0)
  const typeRef = ref<FormInstance>()
  const rules = reactive<FormRules>({
    type_name: [
      { required: true, message: '类型名称为必填项~', trigger: 'blur' },
      { min: 2, max: 15, message: '类型名称长度在2-15个字符之间~', trigger: 'blur' },
    ],
  })
  const visible = ref<boolean>(false)

  const typeListPageInit = async (currentPage: number = 1) => {
    const result = await queryTypesRequest(currentPage)
    typeData.value = result.result.data
    typeData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
      item.updateAt = formatUtcTime(item.updateAt)
    })
    typeTotal.value = result.result.total
  }

  onBeforeMount(async () => {
    await typeListPageInit()
  })

  const editType = async (id: number) => {
    const currentType: any = typeData.value.find((item: any) => item.id === id)
    editTypeForm.type_id = currentType.id
    editTypeForm.type_name = currentType.type_name
    visible.value = true
  }

  const onDelete = async (id: number) => {
    const reslt = await ElMessageBox.confirm('确定删除吗？', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).catch(err => err)
    if (reslt === 'cancel') {
      return notification.info('再想想~')
    } else if (reslt === 'confirm') {
      const result = await deleteTypeRequest(id)
      await typeListPageInit()
      notification.success(result.msg)
    }
  }

  const handleCurrentPageChange = async (currentPage: number) => {
    await typeListPageInit(currentPage)
  }

  const onSubmitUpdate = async () => {
    if (!typeRef.value) return
    await typeRef.value.validate(async valid => {
      if (valid) {
        const result = await updateTypeNameRequest(editTypeForm.type_id, editTypeForm.type_name)
        visible.value = false
        notification.success(result.msg)
        await typeListPageInit()
      } else {
        return
      }
    })
  }
</script>

<style scoped></style>
